<script lang="ts" setup>
import { ref } from 'vue';

const isShow = ref(false)

const toggleShow = () => {
  // 取反后，重新赋值
  isShow.value = !isShow.value
}
</script>

<template>
  <button @click="toggleShow()">开关按钮</button>
  <!-- 
    v-show 控制的标签，还会保留在页面中，值为 false 时只是被隐藏
    通过 style="display：none;"  不可见，不占位（类似鸿蒙的 Visibility.None）
  -->
  <div class="box" v-show="isShow">
    我是通过 v-show 条件渲染的盒子
  </div>
  <!-- 
    v-if 控制的标签，值为 false 时，不会创建，已创建的也会被删除（类似鸿蒙的 if 条件渲染）
  -->
  <div class="box" v-if="isShow">
    我是通过 v-if 条件渲染的盒子
  </div>
</template>

<style scoped>
.box {
  width: 300px;
  height: 100px;
  background-color: pink;
  margin: 10px;
}
</style>
